<body>
<div class="container-fluid" style="background-color: #EEEEEE">
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-6" style="background-color: #fff; margin: 5px; padding: 5px;">
            <div class="row" style="margin: 5px;">
                <div class="col-lg-6" style="color: #3AAD48">
                    <h3>ĐĂNG KÝ THÀNH VIÊN</h3>
                </div>
                <div class="col-lg-6">
                    <img class="img-responsive" src="<?php echo base_url() ?>assets/images/cover.jpg">
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-lg-9">
                            <div class="row" style="margin: 5px;">
                                <span> Email </span>
                            </div>
                        </div>
                        <div class="col-lg-3" style="padding-top: 5px;">
                            <div class="row">
                                <span id="required">*</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <input class="form-control" type="text" placeholder="Địa chỉ email" id="txtEmail" onkeypress="$('#reqEmail').hide();" onchange="checkEmail();">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row" style="margin-left: 5px; color: red; display: none" id="reqEmail">*bắc buộc</div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="row" style="margin: 5px;">
                                <span> Mật khẩu </span>
                            </div>
                        </div>
                        <div class="col-md-3" style="padding-top: 5px;">
                            <div class="row">
                                <span id="required">*</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <input class="form-control" type="password" placeholder="Mật khẩu" id="txtPassWord" onchange="checkPassword();" onkeypress="$('#txtRePassWord').val('');">
                    </div>
                    <div class="row">
                        <span style="font-size: 12px; font-style: italic">*Mật khẩu phải có ít nhất 6 ký tự.</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row" style="margin-left: 5px; color: red; display: none" id="reqPassWord">*bắc buộc</div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="row" style="margin: 5px;">
                                <span> Nhập lại mật khẩu </span>
                            </div>
                        </div>
                        <div class="col-md-3" style="padding-top: 5px;">
                            <div class="row">
                                <span id="required">*</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <input class="form-control" type="password" placeholder="Nhập lại mật khẩu" id="txtRePassWord" onchange="checkRePassword();">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row" style="margin-left: 5px; color: red; display: none" id="reqRePassWord">*bắc buộc</div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="row" style="margin: 5px;">
                                <span> Họ tên </span>
                            </div>
                        </div>
                        <div class="col-md-3" style="padding-top: 5px;">
                            <div class="row">
                                <span id="required">*</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row">
                        <select class="form-control" style="width: 80px;" id="slSex"><option value="0">Anh</option><option value="1">Chị</option></select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <input class="form-control" type="text" placeholder="Họ tên" id="txtName" onkeypress="$('#reqName').hide();">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row" style="margin-left: 5px; color: red; display: none" id="reqName">*bắc buộc</div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="row" style="margin: 5px;">
                                <span> Điện thoại liên lạc </span>
                            </div>
                        </div>
                        <div class="col-md-3" style="padding-top: 5px;">
                            <div class="row">
                                <span id="required">*</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <input class="form-control" type="text" placeholder="Điện thoại di động" id="txtPhone" onkeypress="$('#reqPhone').hide();" onchange="checkPhoneNumber();">
                    </div>
                    <div class="row">
                        <span style="font-size: 12px; font-style: italic">*Số điện thoại phải gồm ít nhất 10 chữ số và tối đa 11 chữ số.</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row" style="margin-left: 5px; color: red; display: none" id="reqPhone">*bắc buộc</div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="row" style="margin: 5px;">
                                <span> Ngày sinh </span>
                            </div>
                        </div>
                        <div class="col-md-3" style="padding-top: 5px;">
                            <div class="row">
                                <span id="required">*</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row">
                        <input type="hidden" id="hidDay">
                        <select class="form-control" style="width: 70px;" id="slDay" onclick="$('#hidDay').val($('#slDay').val());"></select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row">
                        <select class="form-control" style="width: 70px;" id="slMonth" onchange="daysInMonth();"></select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row">
                        <select class="form-control" style="width: 90px;" id="slYear" onchange="daysInMonth();"></select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row" style="margin-left: 5px; color: red; display: none" id="reqBirthday">*bắc buộc</div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="content">
                    <input type="checkbox" id="chConfirm" onclick="$('#reqConfirm').hide();"><span style="margin-right: 5px">Tôi đã xem và đồng ý với <a href="#">Quy chế của Saroma</a></span>
                </div>
                <div class="content" style="margin: 10px; color: red; display: none" id="reqConfirm">
                    <span>*Bạn chưa đồng ý với Quy chế của Saroma</span>
                </div>
            </div>
            <div class="row" style="text-align: center; margin: 5px; display: none" id="spnSuccess"><span style="color: darkgreen">*successful</span></div>
            <div class="row" style="text-align: center; margin: 20px;"><span style="padding: 10px; width: 500px; background-color: darkorange; color: white; font-size: 24px; cursor: pointer;" id="spnRegister">ĐĂNG KÝ</span></div>
            <div class="row">
                <div class="col-lg-6" style="text-align: right">
                    <a href="<?php echo base_url() ?>register/facebook"><img src="<?php echo base_url() ?>assets/images/facebook.png"></a>
                </div>
                <div class="col-lg-6">
                    <a href="<?php echo base_url() ?>register/google"><img src="<?php echo base_url() ?>assets/images/google.png"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3"></div>
</div>
</body>

<script>
    $(document).ready(function(){
        getData();
        $(document).bind('keypress', function(e) {
            if(e.keyCode==13){
                $('#spnRegister').trigger('click');
            }
        });
    });

    function checkEmail(){
        $('#reqEmail').css('color', 'red');
        $('#reqEmail').css('display', 'none');
        var value = $('#txtEmail').val();
        //alert(keycode);
        var url = "<?php echo base_url() ?>";
        var dataString = "email="+value;
        $.ajax({
            type: "POST",
            url: url+"users/checkEmail",
            data: dataString,
            success: function(x){
                //alert(x);
                if(x == '0'){
                    if(isValidEmailAddress(value) == false){
                        $('#reqEmail').css('display', 'block');
                        $('#reqEmail').html("*sai email");
                    }
                    else{
                        $('#reqEmail').css('color', 'darkgreen');
                        $('#reqEmail').css('display', 'block');
                        $('#reqEmail').html("&#10004"); <!-- dau tick ma html la &#10004 -->
                    }
                }
                else{
                    $('#reqEmail').css('display', 'block');
                    $('#reqEmail').html("*email đã được đăng ký");
                }
            }
        });
    }

    function checkPhoneNumber(){
        $('#reqPhone').css('color', 'red');
        $('#reqPhone').css('display', 'none');
        var value = $('#txtPhone').val();
        if(isValidPhoneNumber(value) == false || !isNumeric(value) || value.length < 10 || value.length > 11){
            $('#reqPhone').css('display', 'block');
            $('#reqPhone').html("*số điện thoại không đúng");
            return false;
        }
        else{
            $('#reqPhone').css('color', 'darkgreen');
            $('#reqPhone').css('display', 'block');
            $('#reqPhone').html("&#10004"); <!-- dau tick ma html la &#10004 -->
            return true;
        }
    }

    function isValidEmailAddress(emailAddress) {
        var regex = /\S+@\S+\.\S+/;
        return regex.test(emailAddress);
    }

    function isValidPhoneNumber(txtPhone) {
        var pattern = new RegExp(/^[0-9]/);
        // alert( pattern.test(emailAddress) );
        return pattern.test(txtPhone);
    }

    function checkPassword(){
        $('#reqPassWord').css('color', 'red');
        $('#reqPassWord').css('display', 'none');
        var passWord = $('#txtPassWord').val();
        if(passWord.length < 6){
            $('#reqPassWord').css('color', 'red');
            $('#reqPassWord').css('display', 'block');
            $('#reqPassWord').html("*mật khẩu phải có ít nhất 6 ký tự");
            return false;
        }
        else{
            $('#reqPassWord').css('color', 'darkgreen');
            $('#reqPassWord').css('display', 'block');
            $('#reqPassWord').html("&#10004"); <!-- dau tick ma html la &#10004 -->
            return true;
        }
    }

    function isNumeric(input) {
        var number = /^\-{0,1}(?:[0-9]+){0,1}(?:\.[0-9]+){0,1}$/i;
        var regex = RegExp(number);
        return regex.test(input) && input.length>0;
    }

    function checkRePassword(){
        $('#reqRePassWord').css('color', 'red');
        $('#reqRePassWord').css('display', 'none');
        var passWord = $('#txtPassWord').val();
        var rePassWord = $('#txtRePassWord').val();
        if(rePassWord != passWord){
            $('#reqRePassWord').css('color', 'red');
            $('#reqRePassWord').css('display', 'block');
            $('#reqRePassWord').html("*mật khẩu không trùng khớp");
            return false;
        }
        else{
            $('#reqRePassWord').css('color', 'darkgreen');
            $('#reqRePassWord').css('display', 'block');
            $('#reqRePassWord').html("&#10004"); <!-- dau tick ma html la &#10004 -->
            return true;
        }
    }

    function getData(){
        for(var i = 1; i <= 12; i++){
            $('#slMonth').append('<option value='+i+'>'+i+'</option>');
        }

        var currentTime = new Date();
        var year = currentTime.getFullYear();
        for(var j = year; j >= 1905; j--){
            $('#slYear').append('<option value='+j+'>'+j+'</option>');
        }

        daysInMonth();
    }

    function daysInMonth() {
        var day = $('#hidDay').val();
//        alert(day);
        var month = $('#slMonth').val();
        //alert(month);
        var year = $('#slYear').val();
        //alert(year);
        var numOfDays = getNumOfDays(month, year);
//        alert(numOfDays);

        var length = $('#slDay option').size();
//        alert(length);
        if(numOfDays != length){
            $('#slDay option').remove();

            for(var i = 1; i <= numOfDays; i++){
                $('#slDay').append('<option value='+i+'>'+i+'</option>');
            }
        }
        if(day != ''){
            $('#slDay').val(day);
        }
    }

    function getNumOfDays(month,year) {
        return new Date(year, month, 0).getDate();
    }

    $("#spnRegister").click(function() {
        if($('#txtEmail').val() == ''){
            $('#reqEmail').css('display', 'block');
        }

        if($('#txtPassWord').val() == ''){
            $('#reqPassWord').css('display', 'block');
        }
        if($('#txtRePassWord').val() == ''){
            $('#reqRePassWord').css('display', 'block');
        }
        if($('#txtName').val() == ''){
            $('#reqName').css('display', 'block');
        }
        if($('#txtPhone').val() == ''){
            $('#reqPhone').css('display', 'block');
        }

        if($('#slDay').val() == 0 || $('#slMonth').val() == 0 || $('#slYear').val() == 0){
            $('#reqBirthday').css('display', 'block');
        }
        if($('input:checkbox[id=chConfirm]:checked').length == 0){
            $('#reqConfirm').css('display', 'block');
        }

        if($('#txtEmail').val() != '' && $('#txtPassWord').val() != '' && $('#txtRePassWord').val() != '' &&
            $('#txtRePassWord').val() == $('#txtPassWord').val() && $('#txtName').val() != '' &&
            $('#txtPhone').val() != '' && $('#slDay').val() != 0 && $('#slMonth').val() != 0 &&
            $('#slYear').val() != 0 && isValidEmailAddress($('#txtEmail').val()) == true && checkPhoneNumber() == true && checkPassword() == true && checkRePassword() == true && $('input:checkbox[id=chConfirm]:checked').length != 0){

            var email = $('#txtEmail').val();
            var password = $('#txtPassWord').val();
            var sex = 0;
            if($('#slSex').val() == '1'){
                sex = 1;
            }
            var name = $('#txtName').val();
            var phone = $('#txtPhone').val();
            var day = $('#slDay').val();
            var month = $('#slMonth').val();
            var year = $('#slYear').val();

            var url = "<?php echo base_url(); ?>";
//            alert(url);
            var dataString1 = "email="+email+"&password="+password+"&sex="+sex+"&name="+name+"&phone="+phone+"&day="+day+"&month="+month+"&year="+year;
//            alert(dataString);
            $.ajax({
                type: "POST",
                url: url+'users/createNewUser',
                data: dataString1,
                success: function(x){
//                    alert(x);
                    if(x == '1'){
                        $('#reqEmail').css('display', 'block');
                        $('#reqEmail').html("*email đã tồn tại");
                    }
                    else{
                        var dataString2 = "email="+email+"&password="+password+"&sex="+sex+"&name="+name+"&phone="+phone+"&day="+day+"&month="+month+"&year="+year+"&key="+x;
                        $.ajax({
                            type: "POST",
                            url: url+'users/sendMailRegister',
                            data: dataString2,
                            success: function(x){
//                            alert(x);
                                if(x == 0){
                                    window.location.href = "<?php echo base_url() ?>register/success";
                                }
                                else{
                                    alert(x);
                                }
                            }
                        });
                    }
                }
            });
        }
    });
</script>